<template>
<div>
  <div>
    <!-- 模糊查询  -->
    <div class="formTop">
      <el-form
        :model="searchParams"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        inline
      >
        <el-form-item label="日志编号" prop="logid">
          <el-input
            v-model="searchParams.logid"
            style="width: 130px"
            suffix-icon="el-icon-coin"
          ></el-input>
        </el-form-item>
        <el-form-item label="访问者ip地址" prop="visitorip">
          <el-input
            v-model="searchParams.visitorip"
            style="width: 130px"
            suffix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item label="访问时间" prop="visitortime">
          <el-input
            v-model="searchParams.visitortime"
            style="width: 180px"
            suffix-icon="el-icon-star-on"
          ></el-input>
        </el-form-item>
        <el-form-item label="访问方法" prop="visitormethod">
          <el-input
            v-model="searchParams.visitormethod"
            style="width: 180px"
            suffix-icon="el-icon-s-home"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 批量删除的按钮 -->
    <el-button
      type="danger"
      plain
      @click="handleBatchDelete"
      style="margin-left: 20px; width: 120px"
      >批量删除</el-button
    >

    <el-table
      ref="multipleTable"
      :data="loglist"
      tooltip-effect="dark"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="logid" label="日志编号" width="100px">
      </el-table-column>
      <el-table-column prop="visitorip" label="访问者ip地址" width="130px">
      </el-table-column>
      <el-table-column
        prop="visitortime"
        label="访问时间"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="visitorclass" label="访问路径" width="190">
      </el-table-column>
      <el-table-column prop="visitormethod" label="访问方法" width="120">
      </el-table-column>
      <el-table-column prop="other" label="其他" width="100"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button
            class="el-icon-edit"
            size="mini"
            type="warning"
            @click="openModal(scope.row)"
          ></el-button>
          <!-- 删除按钮    -->
          <el-button
            class="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  
<!-- 编辑 -->
<div>
        <el-dialog
          title="更新日志信息"
          :visible.sync="isModalOpen"
          width="30%"
          @close="closeModal"
        >
          <el-form
            :model="form"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            v-if="isModalOpen"
          >
            
            <el-form-item label="日志编号" prop="logid">
              <el-input v-model="form.logid" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="访问地址" prop="visitorip">
              <el-input v-model="form.visitorip" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="访问时间" prop="visitortime">
             <el-input v-model="form.visitortime" style="width: 250px"></el-input>
            </el-form-item>
             <el-form-item label="访问路径" prop="visitorclass">
             <el-input v-model="form.visitorclass" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="访问方法" prop="visitormethod">
              <el-input v-model="form.visitormethod" style="width: 210px"></el-input>
            </el-form-item>
            <el-form-item label="其他" prop="other">
              <el-input v-model="form.other" style="width: 100px"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="success" @click="certainModal">提交</el-button>
              <el-button @click="closeModal">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
</div>


  </div>
</div>
</template>

<script>
import { getLogs, deleteLogs, deleteLogsByIds,findLogsById,updateLogs,findLogsByIds } from "@/api/log";
export default {
  name: "log",
  data() {
    return {
      loglist: [], //模型，学生信息列表
      searchParams: {    //模糊查询
        logid: "",
        visitorip: "",
        visitortime: "",       
        visitormethod: "",
      },
       isModalOpen: false,
      outerVisible: false, //控制编辑对话框的显示
      dialogTitle: "编辑日志信息", //对话框的标题
       form: {
        //编辑日志表单数据
        logid: "",
        visitorip: "",
        visitortime: "",
        visitorclass: "",
        visitormethod: "",
        other: "",
      },
      multipleSelection: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //表格颜色的方法
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    getData() {
      //获取日志信息列表数据
      getLogs().then((res) => {
        this.loglist = res.data; //当前页数据
        console.log(this.loglist);
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除日志信息
    handleDelete(index, row) {
      console.log(index, row);
      const logid = row.logid; // 获取日志logid
      deleteLogs(logid).then((response) => {
        console.log("删除成功:", response.data);

        this.$confirm("确定删除该条日志信息吗？", "提示", {
          type: "warning",
        })
          .then(() => {
            this.$message.success("删除成功"); // 提示用户删除成功
            this.getData(); // 刷新日志信息列表
          })
          .catch((error) => {
            console.error("删除失败:", error);
            this.$message.error("删除失败"); // 提示用户删除失败
          });
      });
    },
    //批量删除日志信息
    handleBatchDelete() {
      const logid = this.multipleSelection.map((item) => item.logid);
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择要删除的日志信息");
        return;
      }
      console.log("选中的日志logid：", logid); //调试信息
      this.$confirm("确定删除选中的日志信息吗？", "提示", {
        type: "warning",
      }).then(() => {
        deleteLogsByIds(logid)
          .then(() => {
            this.$message.success("批量删除成功");
            this.getData(); // 刷新数据
          })
          .catch((error) => {
            console.error("批量删除失败:", error); // 调试信息
            this.$message.error("批量删除失败");
          });
      });
    },
 ///编辑
    // 打开弹框
    openModal(row) {
      this.isModalOpen = true;
      console.log(row);
      //通过学号查找学生信息
      findLogsById(row.logid).then((res) => {
        this.form = res.data;
        console.log(this.logid);
      });
    },
    certainModal() {
      updateLogs(this.form).then((res) => {
        this.getData();
      });
      this.isModalOpen = false;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    //模糊查询
    search() {
      findLogsByIds(this.searchParams).then((res) => {
        this.loglist = res.data;
      });
    },
  },
};
</script>

<style>
/* 表格颜色 */
.el-table .warning-row {
  background: rgb(252, 254, 239);
}

.el-table .success-row {
  background: white;
}
</style>